import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { Checkbox, Dialog, Empty, List, Stepper, SwipeAction,Toast } from 'antd-mobile';

import { reqcartedel, reqcartedit, reqcartlist, } from '../../http/api';
import "./shop.less"


export default class Shop extends Component {
    constructor() {
        super()
        this.state =
        {
            list: [],
            checked: false,
            num: 1,
            allchecked: false,
            isreq:true //防抖节流 作开关处理加减bug 
            //发请求为异步操作
    //  用户连点发请求响应 导致出现用户上一次请求还没做完用户再次请求 num没重新渲染此时num还不是小于一于是但是请求两下导致页面来不及渲染就出现num小于一的情况
            
            // setNum:1
        }

    }
    // 获取列表
    reqlist(){
        reqcartlist({
            uid: JSON.parse(sessionStorage.getItem("userinfo")).uid,
        }).then(res => {
            //  console.log(res);
            let arr = res.data.list[1].content
            console.log(arr);
            //  添加checked字段
            arr.forEach((item )=> {
                // 原数组id等于现数据的item当前项的id
                let obj=this.state.list.find(i=>i.id==item.id)
                item.checked=obj?obj.checked:false
            })
            //  赋值
            this.setState({
                list: arr,
                isreq:true,
                allchecked:arr.every(item=>item.checked)
            })
            //  console.log(res.data.list[1].content);
            console.log(this.state.list);
        })
    }
    componentDidMount() {
        //    获取uid
        console.log(JSON.parse(sessionStorage.getItem("userinfo")).uid);
        // 获取list
        // 开关 如果是true就能发请求 为false就不能
        this.state.isreq=true
        // 请求数据
        this.reqlist()

    }
    // 点击一个
    changeone(e, index) {

        let { list, allchecked } = this.state
        list[index].checked = e

        allchecked = list.every((item) => {
            return item.checked
        })
        this.setState({
            list: [...list],
            allchecked: allchecked
        })
    }
    //点击数量
    setNum(value,index) {
        console.log(index);
            console.log(value);
            if(value<1){
                Toast.show("宝贝不能再少了");
                value=1;
                return;
            }
            // 防抖节流防止出现加减bug
            if(this.state.isreq){
                this.setState({
                    ...this.state,
                    isreq:false
                })
                let {list,allchecked}=this.state
                reqcartedit({
                    id:list[index].id,
                    type:list[index].num>value?1:2
                }).then(res=>{
                    console.log(res);
                    if(res.data.code===200){
                        Toast.show("修改成功");
                        this.reqlist()
                    }
    
                })
            }

           
            
        //     list[index].num=value++
        //   this.setState({
        //    list:[...list]
        // })
    }
    // 全选
    checkedall(e) {
        console.log(e);
        let { list } = this.state
        list.forEach(item => {
            item.checked = e
        })

        this.setState({
            list: [...list],
            allchecked: e
        })
    }
    // 总价
    allprice(){
        return this.state.list.reduce(
            (val, item) => (item.checked ? val + item.price * item.num : val),
            0
          )
    }
    // 删除
    del(id){
console.log(id);
    reqcartedel({id:id}).then(res=>{
       
        if(res.data.code===200){
            Toast.show({
                icon: 'success',
                content: res.data.msg,
            })
            this.reqlist()
        }
    })
    }
    render() {
        let { num, list, allchecked } = this.state
 
        return (

            <div>
                <Header title="购物车"></Header>
                {
                    list.map((item, index) => {
                        return <div className='list' key={item.id}>
                            <List>
                                <SwipeAction
                                    closeOnAction={false}
                                    closeOnTouchOutside={false}
                                    rightActions={[
                                        {
                                            key: 'delete',
                                            text: '删除',
                                            color: 'danger',
                                            onClick: async () => {
                                                await Dialog.confirm({
                                                    content: '确定要删除吗？',
                                                }).then(res=>{
                                                    // 删除
                                                    res&&this.del(item.id)
                                                })
                                            },
                                        },
                                    ]}
                                >
                                    <div className="text">
                                        <Checkbox checked={item.checked} onChange={(e) => this.changeone(e, index)} />
                                        <img src={item.img} alt="" />
                                        <b>单价:{item.price}</b>
                                        <i>总价{(item.price*item.num).toFixed(2)}</i>
                                        <Stepper
                                            value={item.num}
                                            onChange={value => {
                                                this.setNum(value,index)

                                            }}
                                        />
                                    </div>


                                </SwipeAction>
                            </List>
                        </div>

                    })
                }



                <div className="van-submit-bar">
                    <div className="van-submit-bar__bar">
                        <div role="checkbox" aria-checked="false" className="van-checkbox">
                            <Checkbox checked={allchecked} onChange={(e) => this.checkedall(e)}>全选</Checkbox>
                        </div>
                        <div className="van-submit-bar__text">
                           
                            <span className="van-submit-bar__price">合计
                                <span className="van-submit-bar__price van-submit-bar__price--integer">：{(this.allprice()).toFixed(2)}</span>
                               </span>
                        </div>
                        <button className="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
                            <div className="van-button__content">
                                <span className="van-button__text">提交订单</span>
                            </div>
                        </button>
                    </div>
                </div>
            </div>
        );
    }

}

